﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>动画效果控件</title>
    <link href="../../libs/ol/ol.css" rel="stylesheet" type="text/css" />
    <script src="../../libs/ol/ol.js" type="text/javascript"></script>
    <style type="text/css">
        #map{
            width:100%;
            height:570px;
        }
        #menu{
            float:left;
            position:absolute;
            bottom:10px;
            z-index:2000;
        }
    </style>
</head>
<body>
    <div id="map" > 
        <div id="menu">
            <button id="rotate">旋转定位到沈阳</button>
            <button id="elastic">弹性定位到北京</button>
            <button id="bounce">反弹定位到上海</button>
            <button id="spin">自旋定位到武汉</button>
            <button id="fly">飞行定位到广州</button>
            <button id="spiral">螺旋定位到海口</button>
        </div>
    </div>

    <script type="text/javascript">
        //实例化地图视图对象
        var view = new ol.View({
            center: [12950000, 4860000], //地图初始中心点
            zoom: 7 //地图初始显示级别
        });

        //实例化Map对象加载地图
        var map = new ol.Map({
            target: 'map', //地图容器div的ID
            //地图容器中加载的图层
            layers: [
            //加载瓦片图层数据（OSM）
                new ol.layer.Tile({
                    source: new ol.source.OSM()
                })
            ],
            //加载瓦片时开启动画效果
            loadTilesWhileAnimating: true, 
            //地图视图设置
            view: view
        });

        //各定位点(中国省会城市)
        var shenyang = ol.proj.fromLonLat([123.24, 41.50]);
        var beijing = ol.proj.fromLonLat([116.28, 39.54]);
        var shanghai = ol.proj.fromLonLat([121.29, 31.14]);
        var wuhan = ol.proj.fromLonLat([114.21, 30.37]);
        var guangzhou = ol.proj.fromLonLat([113.15, 23.08]);
        var haikou = ol.proj.fromLonLat([110.20, 20.02]);


        //旋转动画
        document.getElementById('rotate').onclick = function () {
            //旋转动画
            var rotate = ol.animation.rotate({
                duration: 2000,  //持续时间
                rotation: -4 * Math.PI  //旋转角度
            });
            map.beforeRender(rotate); //地图渲染前设置旋转动画效果(rotate)
            view.setCenter(shenyang); //定位
        };

        //弹性效果定位
        document.getElementById('elastic').onclick = function () {
            var pan = ol.animation.pan({
                duration: 2000,
                easing: elastic,  //松开的参数值
                source: /** @type {ol.Coordinate} */(view.getCenter())
            });
            map.beforeRender(pan); //地图渲染前设置动画效果(pan)
            view.setCenter(beijing); //定位
        };
        //反弹效果定位
        document.getElementById('bounce').onclick = function () {
            //移动效果
            var pan = ol.animation.pan({
                duration: 2000, //持续时间
                easing: bounce,  //松开的参数值
                source: /** @type {ol.Coordinate} */(view.getCenter())
            });
            map.beforeRender(pan); //地图渲染前设置动画效果(pan)
            view.setCenter(shanghai); //定位
        };
        //自旋效果定位
        document.getElementById('spin').onclick = function () {
            var duration = 2000;
            var start = +new Date();
            //移动效果
            var pan = ol.animation.pan({
                duration: duration,
                source: /** @type {ol.Coordinate} */(view.getCenter()),
                start: start
            });
            //旋转效果
            var rotate = ol.animation.rotate({
                duration: duration,
                rotation: 2 * Math.PI, //旋转角度
                start: start
            });
            map.beforeRender(pan, rotate); //地图渲染前设置动画效果(pan+rotate)
            view.setCenter(wuhan); //定位
        };
        //飞行效果定位
        document.getElementById('fly').onclick = function () {       
            var duration = 2000; //持续时间（毫秒）
            var start = +new Date();
            //移动效果
            var pan = ol.animation.pan({
                duration: duration, //设置持续时间
                source: /** @type {ol.Coordinate} */(view.getCenter()), 
                start: start
            });
            //反弹效果
            var bounce = ol.animation.bounce({ 
                duration: duration, //设置持续时间
                resolution: 4 * view.getResolution(),  //4倍分辨率
                start: start
            });
            map.beforeRender(pan, bounce); //地图渲染前设置动画效果(pan+bounce)
            view.setCenter(guangzhou); //定位
        };
        //螺旋效果定位
        document.getElementById('spiral').onclick = function () {
            var duration = 2000; //持续时间（毫秒）
            var start = +new Date(); 
            //移动效果
            var pan = ol.animation.pan({
                duration: duration,
                source: /** @type {ol.Coordinate} */(view.getCenter()), 
                start: start
            });
            //反弹效果
            var bounce = ol.animation.bounce({
                duration: duration,
                resolution: 2 * view.getResolution(), //2倍分辨率
                start: start
            });
            //旋转效果
            var rotate = ol.animation.rotate({
                duration: duration,
                rotation: -4 * Math.PI,  //旋转角度
                start: start
            });
            map.beforeRender(pan, bounce, rotate); //地图渲染前设置动画效果(pan+bounce+rotate)
            view.setCenter(haikou);//定位
        };

        //反弹值
        function bounce(t) {
            var s = 7.5625, p = 2.75, l;
            if (t < (1 / p)) {
                l = s * t * t;
            } else {
                if (t < (2 / p)) {
                    t -= (1.5 / p);
                    l = s * t * t + 0.75;
                } else {
                    if (t < (2.5 / p)) {
                        t -= (2.25 / p);
                        l = s * t * t + 0.9375;
                    } else {
                        t -= (2.625 / p);
                        l = s * t * t + 0.984375;
                    }
                }
            }
            return l;
        }

        //弹性值
        function elastic(t) {
            return Math.pow(2, -10 * t) * Math.sin((t - 0.075) * (2 * Math.PI) / 0.3) + 1;
        }
    </script>
</body>
</html>
